<!-- 添加异常 -->
<template>
	<view class="contact">
		<view class="head-context">
			<p class="head-text">运单信息</p>
			<div class="head-info">
				<p><spn>运单号</spn><span class="number">{{items.waybillNumber}}</span></p>
				<p><spn class="head-number">货号</spn><span class="number">{{items.articleNumber}}</span></p>
				<p><spn>收货人</spn><span class="number-blue">{{items.putUserName}}<span v-if="item.putPlane!=null">{{item.putPlane}}</span><img src="../../../static/电话.png" class="head-icon"></span></p>
			</div>
		</view>
		<view class="reason-context">
			<p class="reason-text">异常原因</p>
			<div>
				<textarea rows="4" cols="50" class="reason-all" v-model="textareValue"/>
			</div>
		</view>
		<view class="photo-context">
			<p class="photo-text" >拍照<span class="sum">{{images.length}}/5</span></p>
				<view v-for="(image, index) in images" :key="index" class="image-item" >
				      <image :src="image" style="width: 80px; height: 80px;"></image>
				    </view>
			<span class="photo" v-if="images.length<5"><img src="../../../static/相机.png" class="photo-icon" @click="chooseImages">
			</span>
		</view>
		<view class="end" >
			<button class="end-button" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	import {getDetails,addAbnormal} from '@/api/appointment.js';
	export default {
		data() {
			return {
				  images: [] ,// 存储选中的图片路径,
				  items:{},
				  req:{},
				  picture:[],//存储后的路径
				  pictureString:'',
				  imageUrl:'',
				  textareValue:'',
				  userParam:{}
			}
		},
		onLoad(options) {
				this.businessId=options.id
				this.phone=options.phone
			},
		mounted(){
			getDetails({businessId: this.businessId}).then(res =>{
				this.items=res.data.data
			}).catch((error) => {
			});
		},
		methods: {
			save(){
				if(this.images.length<3){
					uni.showToast({
					        title: '至少需要上传三张照片！',
					        icon: 'none',
					    });
					 return; // 如果为空，则不执行后续操作
				}
				 if (!this.textareValue) {
						uni.showToast({
						        title: '请填写异常原因',
						        icon: 'none',
						    });
				        return; // 如果为空，则不执行后续操作
				}
				this.req.picture=this.picture.toString();
				this.req.businessId=this.businessId
				this.req.abnormalRequest=this.textareValue
				this.req.contactInformation=this.phone
				addAbnormal(this.req).then(res=>{
					uni.showToast({
						        title: '预约成功',
						        icon: 'success',
						    });
					// uni.redirectTo({
					//     url: '/pages/index/order/order?value=1&phone='+this.phone // 请注意，这里的url应为相对路径，且以'/'开头
					// });
					const vm = this; 
					uni.getStorage({
					  key: 'userParams_key', // 之前保存数据时使用的键
					  success: function (res) {
						  console.log('获取到的用户参数：', res.data);
						  vm.userParam=res.data;
					      // 或者，如果你在一个箭头函数中，this 会自动绑定到外部作用域（比如 Vue 实例）
					      // 但由于我们在 success 回调中，这里需要使用一个变量来保存引用
					   uni.reLaunch({
					       url: '/pages/index/index?userName='+vm.userParam.userName+'&phone='+vm.userParam.phone+'&userId='+vm.userParam.userId+'&subaccount='+vm.userParam.subaccount ,// 请注意，这里的url应为相对路径，且以'/'开头
					   });
					      // 更新页面的状态
					    // 你可以在这里使用获取到的数据，比如更新页面的状态或者执行其他逻辑
					  },
					  fail: function (err) {
					    uni.showToast({
					    	        title: '账号下线,请重新登录',
					    	        icon: 'error',
					    	    });
					    // 处理获取数据失败的情况，比如显示一个错误提示
					  }
					});
				}).catch((error)=>{
					// 请求失败
					console.error('预约失败', error);
					uni.showToast({
					    title: '预约失败，请重试',
					    icon: 'none',
					});
				});
			},
			chooseImages() {
			      uni.chooseImage({
			        count: 9, // 允许选择图片的数量，默认为9
			        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
			        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
			        success: (res) => {
						 // 获取新选择的图片路径
						const newImages = res.tempFilePaths;
						this.images = this.images.concat(res.tempFilePaths);
						// 遍历新选择的图片，并检查是否已上传或已选择
						newImages.forEach((filePath) => {
			          // 将选中的图片路径添加到images
					    this.uploadFile(filePath);
					  });
			        },
					
			      });
				  
			    },
				uploadFile(filePath) {
				      uni.uploadFile({
				        url: 'https://image.ff5630.com/upload/buy/upload', // 仅为示例，非真实的接口地址
				        filePath: filePath,
				        name: 'file',
				        formData: {
				          user: 'test'
				        },
				        success: (uploadFileRes) => { // 使用箭头函数来保持this的上下文
						try {
						          // 解析服务器返回的JSON响应
						          const responseObj = JSON.parse(uploadFileRes.data);
						          const uploadedImageUrl = responseObj.data; // 假设服务器返回的是图片的URL
						 
						          // 检查并添加URL到picture数组（避免重复）
						          const completeUrl = uploadedImageUrl.startsWith('http://') || uploadedImageUrl.startsWith('https://')
						            ? uploadedImageUrl
						            : 'https://' + uploadedImageUrl; // 根据实际情况调整URL格式
						 
						          if (!this.picture.includes(completeUrl)) {
						            this.picture.push(completeUrl);
						          }
								  console.log(this.picture)
						          console.log('上传成功，图片URL：', completeUrl);
						 
						          // 其他处理上传成功后的逻辑可以在这里添加
						 
						        } catch (error) {
						          console.error('解析上传响应失败：', error);
						        }
				        },
				        fail(err) {
				          console.error('上传失败：', err);
				        }
				      });
					  }
			// chooseImages() {
			//       uni.chooseImage({
			//         count: 9, // 允许选择图片的数量，默认为9
			//         sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
			//         sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
			//         success: (res) => {
			//           // 将选中的图片路径添加到images数组中
			//           this.images = this.images.concat(res.tempFilePaths);
			//         }
			//       });
			//     },
		}
	}
</script>

<style>
@import "abnormal.css";
</style>
